<script lang='ts' setup name='Father'>  
 import { onMounted, ref } from 'vue' 

 import Hero  from "./Hero.vue";

    //统一增加一下所有 英雄 的 武力值
    const zf =ref()
    const zgl =ref()
    const gy =ref()

    const onFightingHero = ref(['张飞','关羽'])

    function plusAllForce(refs: {    [key:string]:any}){
        console.log("refs  ",refs)


        // zf.force += 10
        // zgl.force += 10
        // gy.force += 10

        for (const key in refs) {
            //获取每个组件的实例
            const hero = refs[key];
            hero.force += 10;

        }
    }


    onMounted(()=>{

        console.log(zf.value);
        console.log(zgl.value);
        console.log(gy.value);
        


    })

    defineExpose({onFightingHero})


</script>  
  
<template>  

    <div class="Game">

        <button @click="plusAllForce($refs)">修改所有的武将武力值 +10</button>

        <ol>
                <li v-for="name in  onFightingHero ">
                    {{ name }}正在出战
                </li>

        </ol>



        <Hero name="张飞"        ref="zf"></Hero>
        
        
        <Hero name="诸葛亮" :initForce="800" ref="zgl"></Hero>

        <Hero name="关羽" :initForce="900" ref="gy"></Hero>


    </div>





  
</template>  
  
<style scoped>  

.Game{
    padding:10px;
    background-color: skyblue;
    border-radius: 10px ;
    box-shadow:  0 0 10px black;
    min-height: 100px;
}

</style>  